<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                width: 300px;
                height: 300px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>我是一行文本</span>
            <span>我是二行文本</span>
            <button>我是一个按钮</button>
        </div>

        <script src="./jquery/jquery-3.6.0.js"></script>
        <script>
            // ·创建一个p标签 <p>我是创建的一个p标签</p>
            const p = $("<p>我是创建的一个p标签</p>")

            // ·将页面中的某个元素替换为新创建的p
            // $(".box span:eq(0)").replaceWith(p)

            // ·用新创建的p标签替换.box下的全部span
            // p.replaceAll($(".box span"))

            // ·清空.box中的全部内容
            // $(".box").empty()

            // ·button自裁
            // $("button").remove()

            // ·移除.box下的全部span
            // $(".box span").remove()

            // ·克隆一份.box包含其自身事件和子元素事件，追加到body末尾
            $(".box").on("click",()=>console.log("别摸我"))
            $(".box button").click(function (e) {
                console.log($(this));
                e.stopPropagation()
            })

            // const copy = $(".box").clone()//默认没有携带数据和事件
            // const copy = $(".box").clone(true)//携带自身的数据和事件 孩子元素默认随爸
            // const copy = $(".box").clone(true,false)//自身数据和事件拷贝 孩子不拷贝
            const copy = $(".box").clone(false,true)//不好使
            copy.appendTo($("body"))

        </script>
    </body>
</html>
